<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image2</title>
</head>

<body>
    <div class="container">
        <div class="before"></div>
        <img src="../../../Desktop/sky.jpg" alt="测试图片">
        <div class="after"> Broken image of 测试图片</div>
        <!-- <img src="../../../Desktop/sky.jpg" alt="测试图片"> -->
    </div>
</body>
<style>
    .container {
        height: 50px;
        width: 500px;
        margin-top: 100px;
        position: relative;
    }

    img {
        height: 50px;
        width: 500px;
    }

    .before {
        display: block;
        position: absolute;
        top: -10px;
        left: 0;
        /* height: calc(100% + 10px); */
        height: 60px;
        /* width: 100%; */
        width: 500px;
        background-color: rgb(230, 230, 230);
        border: 2px dotted rgb(200, 200, 200);
        border-radius: 5px;
    }

    .after {
        display: block;
        position: absolute;
        z-index: 10;
        top: 5px;
        left: 0;
        /* width: 100%; */
        width: 500px;
        font-size: 16px;
        font-style: normal;
        font-family: FontAwesome;
        color: rgb(100, 100, 100);
        text-align: center;
    }
</style>

</html>